<!DOCTYPE html>
<html>
<head>
	<title>popup页</title>
	<meta charset="utf-8"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/JQuery/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="jq_plugins/tab/js/jQuery.rTabs.js"></script>
    <script src="/js/layui-v2.6.8/layui.js"></script>
    <link rel="stylesheet" href="/js/layui-v2.6.8/css/layui.css">
</head>
<body>
	<div id="app">
		<div>
			<div> </div>
			<div class="tab" id="tab">
                <div style="display: flex;">
                    <!-- <button onclick="tOptions()">设置</button> 绑定 click事件无效 -->
                    <button id="to_setting" style="font-size: 0;line-height:0;border:none;background-color: white;width: 30px;
                    display: flex;justify-content: center;align-items: center;cursor:pointer;
                    " onclick="tOptions()"><img style="width: 18px;height: 18px;" src="./img/setting.png"/></button>
                    <div class="tab-nav j-tab-nav" style="flex: 1;">
                        <a href="javascript:void(0);" class="current"> 所有 </a>
                        <a href="javascript:void(0);"> 订阅 </a>
                        <a href="javascript:void(0);"> 自选 </a>
                        <a href="javascript:void(0);"> 关注 </a>
                    </div>
                </div>

				<div class="tab-con">
					<div class="j-tab-con">	
						<div id="container" class="tab-con-item" style="display:flex;">
                            <div class="search">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label stock_search-label">搜索选择框</label>
                                            <div class="layui-input-inline stock_search-wrapper">
                                                <select class="stock_search" lay-verify="required" lay-search="" lay-filter="0">
                                                    <option value="">直接选择或搜索选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <div class="header"> </div>
                                <div class="table"> </div>
                            </div>
						</div>
                        <div id="container2" class="tab-con-item">
                            <div class="search">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label stock_search-label">搜索选择框</label>
                                            <div class="layui-input-inline stock_search-wrapper">
                                                <select class="stock_search" lay-verify="required" lay-search="" lay-filter="1">
                                                    <option value="">直接选择或搜索选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <div class="header"></div>
                                <div class="table"></div>
                            </div>
						</div>
                        <div id="container3" class="tab-con-item">
                            <div class="search">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label stock_search-label">搜索选择框</label>
                                            <div class="layui-input-inline stock_search-wrapper">
                                                <select class="stock_search" lay-verify="required" lay-search="" lay-filter="2">
                                                    <option value="">直接选择或搜索选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <div class="header"> </div>
                                <div class="table"> </div>
                            </div>
						</div>
						<div id="container_focus" class="tab-con-item">
                            <div class="search">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label stock_search-label">搜索选择框</label>
                                            <div class="layui-input-inline stock_search-wrapper">
                                                <select class="stock_search" lay-verify="required" lay-search="" lay-filter="3">
                                                    <option value="">直接选择或搜索选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <div class="header"> </div>
                                <div class="table"> </div>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- chrome插件禁止 内联脚本的写法 -->
<script type="text/javascript" src="js/enum.js"></script>
<script type="text/javascript" src="page_script/covert_tab.js"></script>
<script type="text/javascript" src="page_script/data.js"></script>

<style>
	*{ margin:0;padding:0}
    body{ background:#fff;}
    h2 {
        width: 480px;
        margin: 0 auto 10px auto;
        font-size: 18px;
        font-family: "微软雅黑";
        color: #333;
    }
    .tab {
        position: relative;
        width: 480px;
        height: 230px;
        overflow: hidden;
        /* margin: 0 auto 20px auto; */
        font-family: Arial;
    }
    .tab-nav {
        display: flex;
        height: 30px;
        overflow: hidden;
        background: #f5f5f5;
    }
    .tab-nav a {
        flex:1;
        height: 30px;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
        color: #999;
    }
    .tab-nav a.current {
        background: #80b600;
        color: #fff;
    }
    .tab-con {
        position: relative;
        width: 480px;
        height: 200px;
        overflow: hidden;
        /* background: #80b600; */
    }
    .tab-con-item {
        display: flex;
        flex:1;
        flex-direction: column;
        /* padding-top: 44px;   给fixed留出的位置 */
        display: none;
        width: 480px;
        height: 200px;
        text-align: center;
        color: #fff;
		overflow: auto;
    }
    .tab-con-item .content{
        display: flex;
        flex:1;
        flex-direction: column;
    }
</style>

<style>
    .tab-con-item .content{
        overflow: hidden;
    }
    .search{
		/* background-color: red; */
		width: 100%;
    }
    .search .layui-form-item {
        margin: 4px 0; 
    }
    .search .layui-inline,.search .layui-inline .layui-input-inline{
        margin-bottom: 0;
    }
    .search .layui-anim-upbit{
        color: black;       /* 默认 select 选项值 */
    }
    .search .layui-inline{
        display: flex;
    }
    .search .stock_search-wrapper {
        flex: 1;
    }
    .search .stock_search-wrapper .layui-form-select dl{
        max-height: 120px;
    }
    .search .stock_search-wrapper .layui-form-select dl dd, .search .stock_search-wrapper .layui-form-select dl dt {
        line-height: 24px;
    }
    .tab-con-item .content .table{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }
    .content{

    }
	.list_header{
        /* margin-top:-4px;           -24 + 10 */
		background-color: #999999;
		/* position:fixed; */
		width: 100%;
	}
	.list_item{
		display: flex;
		font-size: 14px;
		min-height:24px;
		line-height:24px;
        align-items: center;
	}
    .list_item .item_unit{
		color:white;
	}
    .list_item .item_unit_flex1{
		flex:1
    }
    .list_item .item_unit_wid50{
        width: 50px;
    }
    .list_item .item_unit_wid60{
        width: 60px;
    }
    .list_item .item_unit_wid80{
        width: 80px;
    }
    .list_item .item_unit_wid100{
        width: 100px;
    }

</style>

<style>
    .stock_search-label{ color: black; }
    .i_color_red,.color_red .item_unit{ color: #ff0000; }
    .i_color_green,.color_green .item_unit{ color: #80b600; }
    .focus_item{ filter: opacity(0.6); }
    .item_unit_stock,.focus_item{
        cursor: pointer;
    }
</style>
</html>